<div class="form-container">
    <br/>
    <div class="box">
        <div class="row marginZero">
            <h4>测试table编辑模式checkbox</h4>
        </div>
        <div class="row marginZero">
            <epoch:table id="testTableNewEditCheckbox" queryUrl="${basePath}/sys/test/testTableNewSearchAjax" rowId="id"
                tableName="测试table编辑模式checkbox" showRefresh="true" editable="true" onSaveEdit="saveEdit"
                onRowEditing="outArgs" onRowConfirmEdit="outArgs" onRowCancelEdit="outArgs">
                <epoch:tr name="id" formName="id" check="checkbox"></epoch:tr>
                <epoch:tr name="名称" formName="menu_name" width="10%"></epoch:tr>
                <epoch:tr name="描述" formName="comments" width="20%"></epoch:tr>
                <epoch:tr name="状态" formName="status" editorType="select"
                    editorData="${lisFun.dictForEditor('PUB_ENABLE_DISABLE')}" width="5%"></epoch:tr>
                <epoch:tr name="地址" formName="menu_url" width="40%"></epoch:tr>
                <epoch:tr name="图标" formName="menu_icon" width="10%">
                    <i class='fa ~{value} fa-1' aria-hidden='true'></i>~{value}
                </epoch:tr>
                <epoch:tr name="序号" formName="menu_order" width="5%"></epoch:tr>
                <epoch:tr name="创建时间" formName="create_date" editorType="date" width="10%"></epoch:tr>
            </epoch:table>
        </div>
    </div>
    <br/>
    <div class="box">
        <div class="row marginZero">
            <h4>测试table编辑模式radio</h4>
        </div>
        <div class="row marginZero">
            <epoch:table id="testTableNewEditRadio" queryUrl="${basePath}/sys/test/testTableNewSearchAjax" rowId="id"
                tableName="测试table编辑模式radio" showRefresh="true" editable="true" onSaveEdit="saveEdit"
                onRowEditing="outArgs" onRowConfirmEdit="outArgs" onRowCancelEdit="outArgs">
                <epoch:tr name="id" formName="id" check="radio"></epoch:tr>
                <epoch:tr name="名称" formName="menu_name" width="10%"></epoch:tr>
                <epoch:tr name="描述" formName="comments" width="20%"></epoch:tr>
                <epoch:tr name="状态" formName="status" editorType="select"
                    editorData="${lisFun.dictForEditor('PUB_ENABLE_DISABLE')}" width="7%"></epoch:tr>
                <epoch:tr name="地址" formName="menu_url" width="38%"></epoch:tr>
                <epoch:tr name="图标" formName="menu_icon" width="10%">
                    <i class='fa ~{value} fa-1' aria-hidden='true'></i>~{value}
                </epoch:tr>
                <epoch:tr name="序号" formName="menu_order" width="10%"></epoch:tr>
            </epoch:table>
        </div>
    </div>
    <br/>
    <div class="box">
        <div class="row marginZero">
            <h4>测试table编辑模式click</h4>
        </div>
        <div class="row marginZero">
            <epoch:table id="testTableNewEditClick" queryUrl="${basePath}/sys/test/testTableNewSearchAjax" rowId="id"
                tableName="测试table编辑模式click" showRefresh="true" editable="true" editTrigger="click" onSaveEdit="saveEdit"
                onRowEditing="outArgs" onRowConfirmEdit="outArgs" onRowCancelEdit="outArgs">
                <epoch:tr name="id" formName="id" check="checkbox"></epoch:tr>
                <epoch:tr name="名称" formName="menu_name" width="10%"></epoch:tr>
                <epoch:tr name="描述" formName="comments" width="20%"></epoch:tr>
                <epoch:tr name="状态" formName="status" editorType="select"
                    editorData="${lisFun.dictForEditor('PUB_ENABLE_DISABLE')}" width="7%"></epoch:tr>
                <epoch:tr name="地址" formName="menu_url" width="38%"></epoch:tr>
                <epoch:tr name="图标" formName="menu_icon" width="10%">
                    <i class='fa ~{value} fa-1' aria-hidden='true'></i>~{value}
                </epoch:tr>
                <epoch:tr name="序号" formName="menu_order" width="7%"></epoch:tr>
                <epoch:tr name="操作" width="3%" switchable="false"></epoch:tr>
            </epoch:table>
        </div>
    </div>
    <br/>
    <div class="box">
        <div class="row marginZero">
            <h4>测试table列编辑模式custom-simple</h4>
        </div>
        <div class="row marginZero">
            <epoch:table id="testTableNewEditCustomSimple" queryUrl="${basePath}/sys/test/testTableNewSearchAjax"
                rowId="id" tableName="测试table列编辑模式custom-simple" showRefresh="true" editable="true"
                onBeforeSaveEdit="beforeSaveEdit" onSaveEdit="saveEdit" onRowEditing="outArgs"
                onRowConfirmEdit="outArgs" onRowCancelEdit="outArgs">
                <epoch:tr name="id" formName="id" check="checkbox"></epoch:tr>
                <epoch:tr name="名称" formName="menu_name" width="10%" editorType="custom-simple">
                    ~{value}
                    <span class="editable-custom" style="white-space:nowrap;">
                        <input id="item_number~{index}" type="text" name="menu_name" readonly="readonly" style="width:80%;"/>
                        <input id="item_id~{index}" type="hidden" name="item_id"/>
                        <button type="button" class="btn visa-btn-icon visa-btn-select fa fa-search fa-1" style="margin:0;" onclick="showItemPopup('~{index}');"></button>
                    </span>
                </epoch:tr>
                <epoch:tr name="描述" formName="comments" width="20%" editorType="custom-simple">
                    ~{value}
                    <span class="editable-custom">
                        <input id="item_descn~{index}" type="text" name="item_description" readonly="readonly"/>
                    </span>
                </epoch:tr>
                <epoch:tr name="状态" formName="status" editorType="select"
                    editorData="${lisFun.dictForEditor('PUB_ENABLE_DISABLE')}" width="7%"></epoch:tr>
                <epoch:tr name="地址" formName="menu_url" width="38%"></epoch:tr>
                <epoch:tr name="图标" formName="menu_icon" width="10%">
                    <i class='fa ~{value} fa-1' aria-hidden='true'></i>~{value}
                </epoch:tr>
                <epoch:tr name="序号" formName="menu_order" width="10%"></epoch:tr>
            </epoch:table>
            <epoch:commonPopup id="itemPopup" sqlKey="commonInterface.itemSearchForPPmaintain.meta1" callback="onSelectItem" hideBtn="true" />
            <input id="rowIndexForItemPopup" type="hidden" />
        </div>
    </div>
    <br/>
    <div class="box">
        <div class="row marginZero">
            <h4>测试table子标签editDetail</h4>
        </div>
        <div class="row visa-row">
            <epoch:table id="testTableNewEditDetail" queryUrl="${basePath}/sys/test/testTableNewSearchAjax" rowId="id"
                tableName="测试tableNew子标签editDetail" showRefresh="true" editable="true" onSaveEdit="saveEdit"
                onRowEditing="editDetail" onRowConfirmEdit="outArgs" onRowCancelEdit="cancelEditDetail">
                <epoch:tr name="id" formName="id" check="checkbox"></epoch:tr>
                <epoch:tr name="名称" formName="menu_name" width="10%"></epoch:tr>
                <epoch:tr name="描述" formName="comments" width="20%"></epoch:tr>
                <epoch:tr name="状态" formName="status" editorType="select"
                    editorData="${lisFun.dictForEditor('PUB_ENABLE_DISABLE')}" width="7%"></epoch:tr>
                <epoch:tr name="地址" formName="menu_url" width="38%"></epoch:tr>
                <epoch:tr name="图标" formName="menu_icon" width="10%">
                    <i class='fa ~{value} fa-1' aria-hidden='true'></i>~{value}
                </epoch:tr>
                <epoch:tr name="序号" formName="menu_order" width="10%"></epoch:tr>
                <epoch:editDetail>
                    <table id="testTableNewEditDetailPanel" class="table table-bordered table-ma-lg">
                        <thead>
                            <tr>
                                <th>RowIndex:</th>
                                <td><input type="text" id="testTableNewEditDetail_idxBox" class="form-control form-control-sm" readonly="readonly" /></td>
                                <th>RowID:</th>
                                <td><input type="text" id="testTableNewEditDetail_idBox" class="form-control form-control-sm" readonly="readonly" /></td>
                            </tr>
                            <tr>
                                <th>Name:</th>
                                <td><input type="text" id="testTableNewEditDetail_nameBox" class="form-control form-control-sm" /></td>
                                <th>OtherField:</th>
                                <td><input type="text" id="testTableNewEditDetail_othBox" class="form-control form-control-sm" /></td>
                            </tr>
                            <tr>
                                <td class="textright" colspan="4"><button type="button" class="btn btn-visa btn-visa-md" onclick="editDetailOk();">OK</button></td>
                            </tr>
                        </thead>
                    </table>
                </epoch:editDetail>
            </epoch:table>
        </div>
    </div>
    <br/>
    <div class="box">
        <div class="row marginZero">
            <h4>测试table行内commonAttach组件</h4>
            <p>
                说明：<br />
                此功能用于测试table编辑模式下行内使用commonAttach组件；<br />
                附件列使用了editable="custom"属性以启动自定义编辑模式，并指定formName="attach_json"将附件数据关联到row的attach_json属性中；<br />
                这样设置后，当table确定应用编辑模式数据后，组件会调用custom编辑模式下get-data属性指定的方法来从commonAttach组件中获取上传附件的数据并存放到row.attach_json属性里；<br />
                注意附件列中有两个附件组件弹出窗，第一个是当本行处理显示模式时用来查看已保存的附件数据的，这个附件组件是只读的(readonly="true")；<br />
                第二个附件组件弹出窗在&lt;span class="editable-custom"&gt;容器中，这个是当本行处理编辑模式时用来编辑附件数据的(上传、删除、修改描述)；<br />
                请注意在custom编辑模式下，如果某行退出编辑状态，则未保存的附件数据将被丢弃；<br />
                另外table使用了saveEditOnly="false"以禁用“只保存编辑行数据”的功能，以避免未进入编辑模式的行的附件数据被遗漏；<br />
                注意table的tr中引用的组件的id属性都应当加上一个每行的唯一标识以区分不同行对应的对象，这个唯一标识可以是行的索引~{index}，也可以是行数据的id如~{row.id}或其它唯一值；<br />
                执行table的保存方法时，会在浏览器控制台打印出整个table编辑后的数据，其中每行中都包括对应行的attach_json数据即附件上传数据json字符串；<br />
            </p>
        </div>
        <div class="row marginZero">
            <script type="text/javascript">
                function testTblNewCmnAttachSave(data) {
                    outArgs(data);
                    $.ajax({
                        url:"${basePath}/sys/test/testTableNewWithCommonAttachSaveEdit",
                        type:"POST",
                        data:data,
                        success:function(data,status,jqXHR){
                            outArgs(data);
                            outArgs(status);
                            if(data != null && data.hasOwnProperty("status")){
                                alert(data.status);
                            }
                        },
                        error:function(jqXHR,status,errorInfo){
                            outArgs(status);
                            outArgs(errorInfo);
                        }
                    });
                }
                function testTblNewCmnAttachGetData(row,$td){
                    var attachVar = "_var_testTblNewCmnAttachCompEdit" + row.id + "_attach";
                    var attach = eval("(" + attachVar + ")");
                    var attachData = attach.uploader.extGetData();
                    var attachJson = JSON.stringify(attachData);
                    return attachJson;
                }
                function testTblNewCmnAttachSetData(row,$td,data){
                    // 附件单元格的custom上传模式下set-data方法不需要做设置初始附件数据的方法，因为commonAttach附件会根据businessId自动查询相关附件数据
                }
            </script>
            <epoch:table id="testTableNewWithCommonAttach" queryUrl="${basePath}/sys/test/testTableNewSearchAjax"
                rowId="id" tableName="测试table行内commonAttach组件" showRefresh="true" editable="true"
                saveEditOnly="false" onSaveEdit="testTblNewCmnAttachSave">
                <epoch:tr name="id" formName="id" check="checkbox"></epoch:tr>
                <epoch:tr name="名称" formName="menu_name" width="10%"></epoch:tr>
                <epoch:tr name="描述" formName="comments" width="20%"></epoch:tr>
                <epoch:tr name="状态" formName="status" editorType="select"
                    editorData="${lisFun.dictForEditor('PUB_ENABLE_DISABLE')}" width="7%"></epoch:tr>
                <epoch:tr name="地址" formName="menu_url" width="38%"></epoch:tr>
                <epoch:tr name="图标" formName="menu_icon" width="10%">
                    <i class='fa ~{value} fa-1' aria-hidden='true'></i>~{value}
                </epoch:tr>
                <epoch:tr name="序号" formName="menu_order" width="10%"></epoch:tr>
                <epoch:tr name="附件" formName="attach_json" editorType="custom" width="8%">
                    <button type="button" class="btn btn-visa btn-visa-md"
                        onclick="$('#testTblNewCmnAttachPopView~{index}').modal('show');">查看附件</button>
                    <epoch:winOpen id="testTblNewCmnAttachPopView~{index}" title="查看附件" showSaveBtn="false" width="680px">
                        <div class="box">
                            <div class="row visa-row">
                                <epoch:commonAttach id="testTblNewCmnAttachCompView~{row.id}"
                                    businessId="TEST_CMNATTACH_~{row.id}" showStatus="true" showDescn="true" readonly="true" />
                            </div>
                        </div>
                    </epoch:winOpen>
                    <span class="editable-custom" get-data="testTblNewCmnAttachGetData" set-data="testTblNewCmnAttachSetData">
                        <button type="button" class="btn btn-visa btn-visa-md"
                            onclick="$('#testTblNewCmnAttachPopEdit~{index}').modal('show');">编辑附件</button>
                        <epoch:winOpen id="testTblNewCmnAttachPopEdit~{index}" title="编辑附件" showSaveBtn="false" width="680px">
                            <div class="box">
                                <div class="row visa-row">
                                    <epoch:commonAttach id="testTblNewCmnAttachCompEdit~{row.id}"
                                        businessId="TEST_CMNATTACH_~{row.id}" showStatus="true" showProgress="true" showDescn="true" />
                                </div>
                            </div>
                        </epoch:winOpen>
                    </span>
                </epoch:tr>
            </epoch:table>
        </div>
    </div>
</div>
